<template>
	<div class="writing titleGeneration">
		<Nav></Nav>
		<div class="writing_right">

		<div class="writing_right_content" v-show="!showTable">
        <div class="titleGenerationTitle">
          <div class="titleGenerationTitle_list"><img src="@a/img/sv47.svg" />您输入关键词，以及生成的数量提交任务后任务会在后台自动完成标题及文章创作。<br>这种方法适合生成大量的文章标题。</div>
        </div>



        <div class="BHosting">
          <div class="BHostingNav">
            <a href="#/writing/titleGeneration/BackgroundHostingCreate" class="BHostingNavList">
              <span><img src="@a/img/sv64.svg" /><img src="@a/img/sv64on.svg" /></span><b>创建任务</b>
            </a>
            <div class="BHostingNavList active">
              <span><img src="@a/img/sv65.svg" /><img src="@a/img/sv65on.svg" /></span><b>任务列表</b>
            </div>
          </div>
          <div class="BHostingContent">
            <div class="BHostingContent_create BHostingContentTask" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中" element-loading-background="rgba(255, 255, 255, 1)">
				<div class="BHostingContentTask_top">
					<div class="BHostingContentTask_top_list">ID</div>
					<div class="BHostingContentTask_top_list">创建时间</div>
					<div class="BHostingContentTask_top_list">关键词</div>
					<div class="BHostingContentTask_top_list">文章分类</div>
					<div class="BHostingContentTask_top_list">审核方式</div>
					<div class="BHostingContentTask_top_list">生成条数</div>
					<div class="BHostingContentTask_top_list">已生成</div>
					<div class="BHostingContentTask_top_list">备注</div>
				</div>
				<div class="ovauto BHostingContentTask_content">
					<div class="BHostingContentTask_content_list" v-for="(item, index) in listData" :key="index">
						<div class="content_list_li">{{item.id}}</div>
						<div class="content_list_li">{{item.create_time}}</div>
						<div class="content_list_li"><span @click="showArticleList(item.id)">{{item.keywords}}</span></div>
						<div class="content_list_li">{{item.articleClass.name}}</div>
						<div class="content_list_li">{{item.check_type?"手动审核":"自动审核"}}</div>
						<div class="content_list_li">{{item.num}}</div>
						<div class="content_list_li"><span @click="showArticleList(item.id)">{{item.has_num}}</span></div>
						<div class="content_list_li">{{item.remark?item.remark:'-'}}</div>
					</div>
				</div>

				<div class="page">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="current_page"
						:page-sizes="per_pages"
						:page-size="per_page"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total">
					</el-pagination>
				</div>
            </div>
          </div>
        </div>
		
		

			</div>


		</div>



		
		<div class="importTitleWindow importTitleWindow2" v-show="importTitle">
			<div class="Preview_content">
				<div class="Preview_content_title">
					<div class="content_title_left">
						<div class="title_left_dd"><span></span>已生成列表</div>
					</div>
					<div class="content_title_right" @click="importTitle = !importTitle"><i
							class="el-icon-close"></i></div>
				</div>
				<div class="importTitleWindow2_content">
					<div class="importTitleWindow2_content_top">
						<div class="content_top_list">序号</div>
						<div class="content_top_list">文章分类</div>
						<div class="content_top_list">文章标题</div>
						<div class="content_top_list">状态</div>
						<div class="content_top_list">生成时间</div>
					</div>
					<div class="ovauto importTitleWindow2_content_bottom">
						<div class="content_bottom_list" v-for="(item, index) in articleList" :key="index">
							<div class="bottom_list_li">{{item.id}}</div>
							<div class="bottom_list_li">{{item.articleClass.name}}</div>
							<div class="bottom_list_li">{{item.name}}</div>
							<div class="bottom_list_li">
								<div class="list_li_state on" v-if="!item.state"><span></span>内容生成中</div>
								<div class="list_li_state" v-if="item.state==1"><span></span>已生成</div>	
								<div class="list_li_state" v-if="item.state==2"><span></span>待发布</div>
								<div class="list_li_state" v-if="item.state==3"><span></span>已发布</div>
							</div>
							<div class="bottom_list_li">{{item.create_time}}</div>
						</div>

					</div>
				</div>
			</div>
		</div>

		

	</div>



</template>

<script>
	import {
		MessageBox,
		Message
	} from 'element-ui';
	import NProgress from 'nprogress';
	import {
		Loading
	} from 'element-ui';
	import table from "@c/common/table/table";
	import loginWindow from "@c/common/loginWindow/loginWindow";
	import rechargeWindow from "@c/common/rechargeWindow/rechargeWindow";
	import Nav from "@c/common/nav/nav";

	export default {
		name: "BackgroundHostingList",
		data() {
			return {
				listData:[],
				per_page:10,
				per_pages:0,
				current_page: 1,
				last_page: 1,
				total: 0,
				importTitle:false,
				articleList:[],//任务下的文章列表
			};
		},
		created() {
			this.getList();

		},
		components: {
			table,
			Nav,
			rechargeWindow
		},
		computed: {

		},
		methods: {
			//任务列表
			getList() {
				// loading 开始
				this.loading = true;

				let that = this;
				that.axios.get('/api/ArticleTitleTask/list', {
					params: {
						page: this.current_page,
						list_rows: this.per_page,
					}
				}).then(res => {
					// loading结束
					this.loading = false;
					this.listData=res.result.data;
					this.total=res.result.total;
					this.per_page=res.result.per_page;


				})
			},
			//文章列表
			showArticleList(id){
				this.loading = true;
				this.importTitle=true;
				this.axios.get('/api/ArticleTitleTask/articleList', {
					params: {
						id: id,
					}
				}).then(res => {
					// loading结束
					this.loading = false;
					this.articleList=res.result;


				})
			},
			//分页
			handleSizeChange(val) {
			  this.per_page = val
			  this.getList()
			},
			handleCurrentChange(val) {
			  this.current_page = val
			  this.getList()

			},	
			
		},

	}
</script>

<style>
	@import "titleGeneration.css";
</style>